<script setup>
import { CircleClose } from '@element-plus/icons-vue'
</script>

<template>
    <!-- 错误提示 -->
  <div class="error_tip">
    <div class="left">
        <el-icon class="error_icon">
            <CircleClose />
        </el-icon>
    </div>
    <div class="center">账号/密码有误，请重新输入！</div>
    <div class="right"></div>
  </div>
</template>

<style scoped lang="less">
.error_tip {
    position: fixed;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    display: flex;
    height: 50px;
    background-color: #fef0f0;
    font-size: 14px;
    color: #F56C6C;
    border-radius: 5px;
    .left, .right {
        width: 60px;
    }
    .center {
        flex: 1;
    }
    .left, .right, .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .left {
        .error_icon {
            font-size: 20px;
            background-color: #fef0f0;
        }
    }
}

</style>